<template>
  <div class="coupon-card">
    <div class="coupon-card-body" :style="{
      backgroundColor: options.cardColor,
    }">
      <div class="price-group">
        <span class="coupon-card-unit">
          ¥
        </span>
        <span class="coupon-card-price">
          {{ coupon.price }}
        </span>
        <span class="coupon-card-tail">
          {{ coupon.tail }}
        </span>
      </div>
      <span class="coupon-card-description">
        {{ coupon.description }}
      </span>
      <span class="coupon-card-time">
        {{ coupon.time }}
      </span>
    </div>
    <div class="aside-button" :style="{
      backgroundColor: options.buttonColor,
    }" @click="handleClick">
      {{ getButtonText(coupon.status) }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    coupon: {
      type: Object,
      default: () => ({
        title: '标题',
        price: '123',
        tail: '东券',
        description: '满200元可用',
        time: '2022.06.02 - 2022.09.30',
        status: 1,
      })
    },
    options: {
      type: Object,
      default: () => ({
        cardColor: '#1f79c2',
        buttonColor: '#d22727',
      })
    }
  },
  data() {
    return {
      couponStatusUtil: {
        status: {
          0: 'got',
          1: 'used',
          2: 'expired'
        },
      }
    }
  },
  methods: {
    handleClick() {
      const status = this.coupon.status;
      // TODO
    },
    getButtonText(status) {
      if(status === 0) {
        return '领取'
      } else if(status === 1) {
        return '已领取'
      } else if(status === 2) {
        return '已过期'
      }
    }
  }
}
</script>

<style scoped>
.coupon-card {
  display: flex;
  width: 500px;
  height: 300px;
}

.coupon-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 20px;
  width: 400px;
  height: 250px;
  -webkit-mask: radial-gradient(circle at 5px, red 5px, #0000 0) -5px 50% / 100% 20px, radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;
  -webkit-mask-composite: destination-out;
  mask-composite: subtract;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.price-group {
  display: flex;
  justify-content: center;
}

.coupon-card-unit {
  font-size: 40px;
  color: #fff;
  margin-right: 10px;
}

.coupon-card-price {
  font-size: 70px;
  font-weight: 700;
  color: #fff;
}

.coupon-card-tail {
  font-size: 18px;
  color: #fff;
  align-self: flex-end;
  margin-left: 5px;
}

.coupon-card-description {
  color: #fff;
  font-size: 1.1em;
  margin-top: 10px;
}

.coupon-card-time {
  color: #070707ac;
  font-size: 1.2em;
  margin-top: 20px;
}

.aside-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  margin-left: -20px;
  height: 250px;
  width: 80px;
  color: #ffffffdd;
  font-size: 1.5em;
  letter-spacing: 10px;
  writing-mode: vertical-lr;
  cursor: pointer;
  -webkit-mask: radial-gradient(circle at 5px, red 5px, #0000 0) -5px 50% / 100% 20px, 
  radial-gradient(circle at 0px 0px, #0000 0px, red 0) -20px -20px / 50%;
  -webkit-mask-composite: destination-out;
}
</style>